// 提供一个能够显示xtx-message组件的函数
// import Message from 'Message.js' 使用 Message({type:'error',text:'提示文字'})
// this.$message({type:'error',text:'提示文字'})

import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'
// 1、创建dom容易装xtx-message组件变成的虚拟节点
const div = document.createElement('div')
div.setAttribute('class', 'xtx-msssage-container')
document.body.appendChild(div)

let timer = null
export default ({ type, text }) => {
  // 2、xtx-message组件变成的虚拟节点
  const vnode = createVNode(XtxMessage, { type, text })
  // 3、将xtx-message虚拟节点装进容器
  render(vnode, div)
  // 4、3秒后自动消失消息提示,每次使用前先清除定时器
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    render(null, div)
  }, 3000)
}
